<template>
	<view class="footer-btn-box">
		<view class="btn_box" v-if="isShowBtn">
			<view class="add-btn" v-for="(item, index) in btnValue" :key="index + 1" v-if="isShowAddonsBtn && item.id === 'update'" @click="resubmit({ label: '添加项目', id: 'addItem' })">
				添加项目
			</view>

			<!-- 评论按钮 -->
			<view class="box" v-for="(item, index) in btnValue" :key="index" v-if="item.id == 'comment'" @click="resubmit(item)">
				<image src="@/static/approval/comment.png"></image>
				<text>{{ item.label }}</text>
			</view>

			<!-- 撤销按钮 -->
			<view class="box" v-for="(item, index) in btnValue" :key="index" v-if="item.id == 'backend'" @click="resubmit(item)">
				<image src="@/static/approval/submit.png"></image>
				<text>{{ item.label }}</text>
			</view>

			<!-- 修改后提交 -->
			<view class="box" v-for="(item, index) in btnValue" :key="index" v-if="item.id == 'update'" @click="resubmit(item)">
				<image src="@/static/approval/clears.png"></image>
				<text>{{ item.label }}</text>
			</view>

			<!-- 重新创建订单 -->
			<view class="box" v-for="(item, index) in btnValue" :key="index" v-if="item.id == 'recreate'" @click="resubmit(item)">
				<image src="@/static/approval/clears.png"></image>
				<text>{{ item.label }}</text>
			</view>

			<view class="change-btn" v-for="(item, index) in btnValue" :key="index" v-if="item.id === 'reject'" @click="resubmit({ label: '转交', id: 'transfer' })">转交</view>
			<view class="confirm-btn-group" v-if="showBtnGroup">
				<view class="button_box refuse" v-for="(item, index) in btnValue" :key="index" @click="resubmit(item)" v-if="item.id === 'reject'">拒绝</view>
				<view class="button_box agree" v-for="(item, index) in btnValue" :key="index" @click="resubmit(item)" v-if="item.id === 'accept'">同意</view>
			</view>
		</view>

		<!-- 评论弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="bottom_box">
				<view class="right_close" @click="$refs.popup.close()"><text>关闭</text></view>
				<view class="comment_box">
					<textarea v-model="content" placeholder="请输入评论(必填)" style="font-size: 28upx;height: 150upx;" />
					<scroll-view class="comment_img" scroll-y="true" style="height: 200upx;">
						<image
							@click="lookImg(index, comment_imgArry)"
							v-for="(item, index) in comment_imgArry"
							:key="index"
							:src="item"
							style="width: 100upx;"
							mode="widthFix"
						></image>
					</scroll-view>
				</view>
				<view class="send_comment">
					<view class="img_icon"><image @click="chooseImage" src="../../static/images/img_icon.png" mode=""></image></view>
					<button type="default" @click="commentsSend">发送</button>
				</view>
			</view>
		</uni-popup>

		<!-- 拒绝弹框 -->
		<uni-popup ref="rejectPopup" type="bottom">
			<view class="bottom_box">
				<view class="right_close" @click="$refs.popup.close()"><text>关闭</text></view>
				<view class="comment_box"><textarea v-model="content" placeholder="请输入评论(必填)" style="font-size: 28upx;height: 150upx;" /></view>
				<view class="send_comment">
					<view class="img_icon"><!-- <image @click="chooseImage" src="../static/images/img_icon.png" mode=""></image> --></view>
					<button type="default" @click="rejectSend">发送</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popups" type="dialog" style="z-index: 999;">
			<uni-popup-dialog
				type="input"
				message="成功消息"
				title="提示"
				content="是否确定执行该操作?"
				:duration="2000"
				confirmText="确定"
				cancelText="取消"
				:before-close="true"
				@close="closes"
				@confirm="confirms"
			></uni-popup-dialog>
		</uni-popup>

		<!-- 转交弹窗 -->
		<view class="dialog" v-if="showDialog">
			<view class="panel">
				<view class="panel-header"><view class="title">选择人员</view></view>
				<view class="panel-body">
					<view class="row">
						<view class="col dialog-text">转交人员：</view>
						<view class="col"><input type="text" disabled v-model="transferForm.realname" placeholder="请选择" @click="changeUser" /></view>
					</view>
				</view>
				<view class="panel-footer">
					<view class="row">
						<view class="rol"><button type="default" size="mini" @click="comfirmBtn">确认</button></view>
						<view class="rol"><button type="default" size="mini" @click="hideDialog">取消</button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import sun from '@/utils/sun.js';

export default {
	props: {
		isShowAddonsBtn: {
			type: Boolean,
			default() {
				return true;
			}
		},
		//按钮展示
		btnValue: {
			type: Array,
			default() {
				return [];
			}
		},
		isShowBtn: {
			type: Boolean,
			default() {
				return true;
			}
		},
		transferForm: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			//上传评论的图
			comment_imgArry: [],
			content: '', //拒绝内容
			buttons: [], //临时存储
			realname: '',
			label: '',
			showDialog: false // 转交弹窗
		};
	},
	computed: {
		showBtnGroup() {
			console.log('showBtnGroup');
			let btn = [];
			let btnGroup = this.btnValue;
			btnGroup.forEach(item => {
				btn.push(item.id);
			});
			if (btn.includes('accept')) {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		resubmit(e) {
			let _this = this;
			this.buttons = e;
			if (e.id == 'comment') {
				// 评论
				this.content = '';
				(this.comment_imgArry = []), this.$refs.popup.open();
			} else if (e.id == 'reject') {
				// 拒绝
				this.content = '';
				(this.comment_imgArry = []), this.$refs.rejectPopup.open();
			} else if (e.id == 'transfer') {
				// 转交
				this.label = e.label;
				this.showDialog = true;
			} else if (e.id == 'addItem') {
				// 添加增项
				this.$emit('addOther');
			} else if (e.id == 'update') {
				// 更新
				uni.showModal({
					title: '确认更新?',
					content: '提交后，将重新发起审批',
					success: function(res) {
						if (res.confirm) {
							_this.$emit('resubmit', e);
						} else if (res.cancel) {
						}
					}
				});
			} else if (e.id == 'recreate') {
				// 重新创建
				this.$emit('submitAgain');
			} else {
				this.label = e.label;
				this.$refs.popups.open();
			}
		},

		// 跳转选择用户
		changeUser() {
			this.$emit('resubmit', {
				content: this.content,
				label: this.label,
				api: this.buttons.api,
				id: this.buttons.id
			});
		},

		// 转交确认
		comfirmBtn() {
			this.$emit('transferSubmit');
			this.hideDialog();
		},

		// 隐藏弹窗
		hideDialog() {
			this.showDialog = false;
			this.$emit('clearTransferForm');
		},

		//确认
		confirms() {
			let _this = this;
			_this.$emit('resubmit', {
				content: _this.content,
				label: this.label,
				api: _this.buttons.api,
				id: _this.buttons.id
			});
			_this.$refs.popups.close();
		},

		//取消
		closes() {
			this.$refs.popups.close();
		},

		//拒绝发送
		rejectSend() {
			this.$refs.rejectPopup.close();
			this.$emit('resubmit', {
				content: this.content,
				label: '拒绝',
				api: this.buttons.api
			});
		},

		//评论发送
		commentsSend() {
			this.$refs.popup.close();
			this.$emit('resubmit', {
				content: this.content,
				label: '评论',
				api: this.buttons.api,
				image: this.comment_imgArry
			});
		},

		// 选择图片
		chooseImage(e) {
			let _this = this;
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					_this.upImg(res.tempFiles, e);
				}
			});
		},

		lookImg(index, list) {
			let _this = this;
			uni.previewImage({
				current: index,
				urls: list,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {},
					fail: function(err) {}
				}
			});
		},

		//上传图片
		upImg(data, e) {
			let _this = this;
			uni.showLoading({});
			var i = data.i ? data.i : 0; //当前上传的哪张图片
			var success = data.success ? data.success : 0; //上传成功的个数
			var fail = data.fail ? data.fail : 0; //上传失败的个数
			uni.uploadFile({
				url: sun.http + '/h5/order.upload/doupload',
				filePath: data[i].path,
				header: {},
				name: 'file',
				formData: {
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				},
				success: res => {
					if (JSON.parse(res.data).msg == '上传成功') {
						success++; //图片上传成功，图片上传成功的变量+1
						uni.hideLoading();
					}
					_this.comment_imgArry.push(JSON.parse(res.data).data.url);
				},
				fail: () => {
					fail++; //图片上传失败，图片上传失败的变量+1
					// console.log('fail:' + i + "fail:" + fail);
				},
				complete: () => {
					i++; //这个图片执行完上传后，开始上传下一张
					if (i == data.length) {
						//当图片传完时，停止调用
						uni.showToast({
							icon: 'none',
							title: '成功：' + success + ' 失败：' + fail
						});
					} else {
						//若图片还没有传完，则继续调用函数
						data.i = i;
						data.success = success;
						data.fail = fail;
						_this.upImg(data, e);
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
.btn_box {
	width: 100%;
	height: 120upx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #ffffff;
	border-top: 1upx solid #eeeeee;
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	justify-content: space-evenly;
	align-items: center;

	.box {
		min-width: 44upx;
		text-align: center;

		image {
			width: 44upx;
			height: 44upx;
		}

		text {
			font-size: 22upx;
			color: rgba(102, 102, 102, 1);
			display: block;
		}
	}

	.change-btn {
		width: 130upx;
		height: 72upx;
		line-height: 72upx;
		border-radius: 60upx;
		background: rgba(64, 108, 235, 1);
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.add-btn {
		width: 130upx;
		height: 72upx;
		line-height: 72upx;
		border-radius: 60upx;
		font-size: 24upx;
		background: rgba(64, 108, 235, 1);
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.confirm-btn-group {
		display: flex;
		width: 195upx;

		.button_box {
			flex: 1;
			height: 72upx;
			border: 1upx solid rgba(208, 220, 255, 1);
			font-size: 32upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 72upx;
			text-align: center;
		}
	}

	.refuse {
		background: #ffffff;
		color: rgba(64, 108, 235, 1);
		border-radius: 60upx 0 0 60upx;
		border-right: 0 !important;
	}

	.agree {
		background: rgba(64, 108, 235, 1);
		color: rgba(255, 255, 255, 1);
		border-radius: 0 60upx 60upx 0;
		border-left: 0 !important;
	}
}

.bottom_box {
	width: 100%;
	height: 300upx;
	height: 50vh;
	background: #f1f1f1;
	padding: 30upx;
	box-sizing: border-box;
	position: relative;
	border-top-right-radius: 30upx;
	border-top-left-radius: 30upx;

	.comment_img {
		image {
			width: 100upx;
			height: 100upx;
		}
	}

	.send_comment {
		width: 100%;

		padding-top: 30upx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30upx;

		.img_icon {
			width: 100%;
			border-bottom: 1upx solid #dddddd;
			margin-bottom: 30upx;
			padding-left: 20upx;
			display: flex;
			justify-content: left;

			image {
				width: 50upx;
				height: 50upx;
				margin-left: 20upx;
			}
		}

		button {
			width: 600upx;
			font-size: 30upx;
			background: #007aff;
			color: #ffffff;
		}
	}
}

// 转交弹窗
.dialog {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;

	.row {
		padding: 20upx 32upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ebedf0;
		font-size: 12px;

		.col {
			flex: 1;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.col-right {
			text-align: end;
		}
	}

	.row:last-child {
		border: none;
	}

	button {
		color: #fff;
		background-color: rgb(0, 122, 255);
	}

	.panel {
		position: absolute;
		top: 30%;
		left: 5.5%;
		width: 80%;
		padding: 20upx 32upx;
		background-color: #fff;
		z-index: 3;

		.panel-header {
			padding: 20upx 0;
			font-size: 32upx;
		}

		.panel-body {
			.dialog-text {
				flex: none;
				width: 5rem;
			}

			.row:last-child {
				border-bottom: 1px solid #ebedf0;
			}
		}

		.panel-footer {
			.row {
				justify-content: space-around;

				.col {
					border: none;
				}
			}
		}
	}
}
</style>
